<template>
	<view>
		<!-- 操作弹窗 -->
		<u-popup v-model="open" :mode="params.mode" :border-radius="params.borderRadius" 
		:closeable="params.closeable" :close-icon-pos="params.closeIconPos" @close="close" >
				<view class="frame">
					<view class="submit-frame" @click="close">确定</view>
					<view class="flexcenter frame-title">{{title}}</view>
					<view style="width: 686rpx;z-index: 10;margin-left: 32rpx;margin-top: 30rpx;">
					<u-search placeholder="搜索联系人" v-model="keyword" :show-action="false" :height="68"></u-search>
					
					<view class="frame-tabs flexal">
						<view class="frame-tabs-block1 flexcen" :class="tabs == 0? 'frame-tabs-block-active':''" @click="tabs = 0">会议中</view>
						<view class="frame-tabs-block flexcen" :class="tabs == 1? 'frame-tabs-block-active':''" @click="tabs = 1">未入会</view>
						<!-- <view>未入会</view> -->
					</view>
					<!-- 列表 -->
					<scroll-view scroll-y="true" :style="{'height': '870rpx'}" class="scroll-frame">
						<view class="flexalign" style="margin-top: 32rpx;" v-for="(item,index) in list" :key="index">
							<image :src="item.avatar" class="icon"></image>
							<text class="name-text">{{item.name}}</text>
							<view class="frame-tips flexcen" v-if="index == 0">主持人</view>
						</view>
					</scroll-view>
					<view class="flexal" style="margin-top: 30rpx;">
						<view class="button-item flexcen" @click="showPop = !showPop">全体静音</view>
						<view class="button-item flexcen" style="margin-left: 25rpx;">解除全体静音</view>
						<view class="button-item flexcen" style="margin-left: 25rpx;" @click="invitePop = !invitePop">邀请</view>
					</view>
					</view>
				</view>
		</u-popup>
		
		<!-- 全部静音 -->
		<u-popup v-model="showPop" mode="center" border-radius="24">
				<view class="Pop-frame flexcolumnalign">
					<view class="title">所有以及新加入的成员将被静音</view>
					<view class="flexal" style="margin-top: 40rpx;">
					<u-checkbox @change="checkboxChange" :name="'all'" v-model="checked" :shape="'circle'" >允许成员自我解除静音</u-checkbox>
					<!-- <view class="text">允许成员自我接触静音</view> -->
					</view>
					<view style="padding: 32rpx 0rpx;">
					<u-line color="#3C3C43" length="622rpx"/>
					</view>
					<view style="display: flex;width: 100%;">
						<view class="button" @click="showPop = false">取消</view>
						<view class="line"></view>
						<view class="button" style="color: #E25551;" @click="showPop = false">确定</view>
					</view>
				</view>
		</u-popup>
		
		<!-- 邀请弹窗 -->
		<u-popup v-model="invitePop" mode="bottom" border-radius="24" >
			<view class="frame-invite">
				<view class="flexcen title">选择邀请方式</view>
				<view class="flexcen">
					<view class="invite-item flexcumal">
						<image src="/static/metting/copy.png" class="icon" @click="showToast"></image>
						<view class="text">复制邀请</view>
					</view>
					<view class="invite-item flexcumal" @click="openPosterPop">
						<image src="/static/metting/img.png" class="icon"></image>
						<view class="text">分享海报</view>
					</view>
					<view class="invite-item flexcumal" @click="go('/pages2/pages/invite/mettingInviteCode')">
						<image src="/static/metting/erweima.png" class="icon"></image>
						<view class="text">二维码</view>
					</view>
				</view>
				<view class="line"></view>
				<view class="cancel flexcen" @click="invitePop = false">取消</view>
			</view>
		</u-popup>
		
		<!-- 海报弹窗 -->
		<u-popup v-model="posterPop" mode="bottom" border-radius="24">
			<view class="frame">
			<image src="/static/metting/close.png" class="close-img"></image>
			<!-- <view class="submit-frame" @click="close">确定</view> -->
			<view class="flexcenter frame-title">分享海报</view>
			<view style="background: #FFFFFF;">
				<l-painter :board="base" is-canvas-to-temp-file-path custom-style="position:absolute;z-index: 100;margin-left: 32rpx;margin-top: 50rpx;"
					@success="huizhitupian" v-if="huihuabool" />
			
				<view v-for="(item,index) in swiperlist" :key="index" style="width: 686rpx;z-index: 100;margin-left: 32rpx;margin-top: 50rpx;">
					<image :src="item.image" mode="widthFix" style="width: 100%;height: 100%;border-radius: 32rpx 32rpx 32rpx 32rpx;"></image>
				</view>
			
				<view class="submitBottom" v-if="buttonShow">
					<view class="ljfx flexcenter" style="width: 686rpx;margin-left: 32rpx;" @click="bcphoto">保存图片到相册</view>
				</view>
			</view>
			</view>
		</u-popup>
		
		
		<!-- 复制成功提示 -->
		<u-toast ref="uToast" />
		
		
		
	</view>
</template>

<script>
	// import mettingInvitePosterVue from '../../pages2/pages/invite/mettingInvitePoster.vue';
	export default {
		name:"mettingPop",
		props:{
			// 是否打开弹窗
			openPop:{
				type:Boolean,
				default:false
			},
			// 是否打开邀请弹窗
			openInvitePop:{
				type:Boolean,
				default:false
			},
			// 联系人列表
			list: {
				type: Array,
				default: []
			},
			
		},
		data() {
			return {
				keyword:'',
				open:false,
				params:{
					mode:"bottom",
					borderRadius:24,
					closeable:true,
					closeIconPos:"top-left"
				},
				checked:false,		//是否允许成员自我解除静音
				showPop:false,		//静音提示窗
				tabs:0,				//标签下标
				invitePop:false,	//邀请弹窗
				posterPop:false,	//海报弹窗
				
				
				swiper: 0,
				autoplay: false,
				interval: 2000,
				duration: 500,
				haibao: [],
				base: {
					css: {
						width: '686rpx',
						height: '1003rpx',
						background: '#fff',
						position: 'relative',
						borderRadius:'32rpx',
					},
					views: [
						{
							type: 'image',
							src: 'background.png',
							css: {
								objectFit: 'fill',
								// left: '16rpx',
								// top: '16rpx',
								width: '686rpx',
								height: '1003rpx',
								position: 'absolute'
							}
						},
						// {
						// 	type: 'image',
						// 	src: 'touxiang.png',
						// 	css: {
						// 		objectFit: 'fill',
						// 		left: '16rpx',
						// 		top: '918rpx',
						// 		width: '98rpx',
						// 		height: '98rpx',
						// 		radius: '50%',
						// 		background: 'transparent',
						// 		position: 'absolute'
						// 	}
						// },
						
						// {
						// 	type: 'text',
						// 	text: '微信扫一扫 使用小程序',
						// 	css: {
						// 		color: '#000',
						// 		left: '147rpx',
						// 		top: '980rpx',
						// 		fontSize: '24rpx',
						// 		position: 'absolute'
						// 	}
						// },
						{
							type: 'image',
							src: 'erweima.png',
							css: {
								objectFit: 'fill',
								background: 'transparent',
								left: '507rpx',
								top: '805rpx',
								width: '143rpx',
								height: '143rpx',
								position: 'absolute'
							}
						},
						{
							type: 'text',
							text: '鼎智logo',
							css: {
								color: '#FFFFFF',
								// left: '172rpx',
								top: '79rpx',
								width:'686rpx',
								fontSize: '50rpx',
								fontWeight: '400',
								verticalAlign: 'center',
								position: 'absolute',
								textAlign: 'center'
							}
						},
						{
							type: 'text',
							text: '张三的会议',
							css: {
								color: '#15181D',
								left: '74rpx',
								top: '490rpx',
								fontSize: '52rpx',
								fontWeight: '400',
								position: 'absolute',
							}
						},
						{
							type: 'image',
							src: '/static/metting/id.png',
							css: {
								objectFit: 'fill',
								background: 'transparent',
								left: '74rpx',
								top: '589rpx',
								width: '30rpx',
								height: '30rpx',
								position: 'absolute'
							}
						},
						{
							type: 'text',
							text: '220 325 456',
							css: {
								color: '#333333',
								left: '128rpx',
								top: '589rpx',
								fontSize: '30rpx',
								fontWeight: '400',
								position: 'absolute',
							}
						},
						{
							type: 'image',
							src: '/static/metting/time.png',
							css: {
								objectFit: 'fill',
								background: 'transparent',
								left: '74rpx',
								top: '649rpx',
								width: '30rpx',
								height: '30rpx',
								position: 'absolute'
							}
						},
						{
							type: 'text',
							text: '2024/8/5(周一)9:00-10:30',
							css: {
								color: '#333333',
								left: '128rpx',
								top: '649rpx',
								fontSize: '30rpx',
								fontWeight: '400',
								position: 'absolute',
							}
						},
						{
							type: 'text',
							text: '鼎智会议',
							css: {
								color: '#FFFFFF',
								left: '36rpx',
								top: '832rpx',
								fontSize: '42rpx',
								fontWeight: '400',
								position: 'absolute',
								
							}
						},
						{
							type: 'text',
							text: '长按识别二维码参加',
							css: {
								color: '#FFFFFF',
								left: '36rpx',
								top: '894rpx',
								fontSize: '28rpx',
								fontWeight: '400',
								position: 'absolute',
								// width:'686rpx',
								// textAlign: 'center'
							}
						},
					]
				
				},
				swiperlist: [],
				swiperlist2: [],
				swiperht: 0,
				huihuabool: false,
				buttonShow:false,
				current: 1,
				baocuntp: 0,
				indicatorDots: false,
				autoplay: false,
				interval: 2000,
				duration: 500,
				InvitePostersQuery: {
					page: 1,
					limit: 10
				},
				userName: '',
				userInviteCode: '',
				userAvatar: '',
				
				userInfo: {},
				
			};
		},
		components:{
			// mettingInvitePosterVue
		},
		// onShow(){
		// 	// this.LoadInvitePostersList()
		// 	console.log('我是弹窗初始化')
		// },
		watch: {
			// New: 新值 | Old: 老值
			openPop(New, Old) {
				this.open = New
				console.log(`新值:${New} ——— 老值:${Old}`)
			},
			// New: 新值 | Old: 老值
			openInvitePop(New, Old) {
				this.invitePop = New
				console.log(`新值:${New} ——— 老值:${Old}`)
			},
			list: {
				handler(value) { //这是vue的规定写法，当你watch的值发生变化的时候，就会触发这个handler，这是vue内部帮你做的事情
					// console.log('数组变化',value)
					let checkedList = []
					let checked = true
					value.forEach((element,index) => {
						if (element.checked == true) {
							// num++
							checkedList.push(index)
						}
						if(element.checked == false){
							checked = false
						}
					});
					this.checkedList = checkedList
					this.checked = checked
				},
				deep: true, // 可以深度检测到 obj 对象的属性值的变化
				immediate: true //刷新加载  立马触发一次handler
			},
		},
		computed:{
			title(){
				let title = '管理成员'
				return title
			}
		},
		methods:{
			// 是否选中
			checkboxChange(e){
				console.log('e',e)
				this.checked = e.value
			},
			// 弹窗关闭回调
			close(e){
				console.log('弹窗收起',this.open)
				// this.open = false
				let params = {
					list:this.list
				}
				this.$emit('peopleAddCloseSubmit',params)
			},
			// 提示弹窗
			showToast() {
				this.$refs.uToast.show({
					title: '已复制会议邀请',
					type: 'primary',
					// url: '/pages/user/index'
				})
			},
			// 打开邀请海报弹窗
			openPosterPop(){
				this.posterPop = !this.posterPop
				this.swiperlist = []
				this.swiperlist2 = []
				this.LoadInvitePostersList()
			},
			async LoadInvitePostersList() {
				// const res = await myInvitationCode()
					// this.base.views[2].text = '王小明'
					// this.base.views[1].src = "data:image/png;base64," + res.data
					this.selecthb()
					this.base.views[1].src = 'http://luosai.oss-cn-shenzhen.aliyuncs.com/Upload/2024/0712/202407121752186069.png'
					this.fortupian()
				// if (res.code == 200) {
				// 	this.base.views[2].text = this.userInfo.UserName
				// 	this.base.views[1].src = this.userInfo.Avatar
				// 	this.base.views[4].src = res.data
				// 	this.fortupian()
				// } else {
				// 	this.base.views[2].text = this.userInfo.UserName
				// 	this.base.views[1].src = this.userInfo.Avatar
				// 	this.base.views[4].src = this.userInfo.Avatar
				// 	this.fortupian()
				// }
			},
			selecthb(index) {
				this.current = 1
				// this.baocuntp = index
				uni.showLoading({
					title: '绘制海报中...'
				})
			},
			fortupian() {
				// this.base.views[0].src = this.fwqUrl + 'yaoqinghaoyouhaibao.png'
				this.base.views[0].src = '/static/metting/poster.png'
				this.huihuabool = true
				console.log(this.base,'this.huihuabool',this.huihuabool)
			},
			huizhitupian(img) {
				console.log(1)
				console.log(img)
				uni.hideLoading()
				this.swiperlist.push({
					image: img
				})
				this.swiperlist2.push(img)
				console.log(this.swiperlist, this.swiperlist2)
				this.huihuabool = false
				this.swiperht++
				if (this.haibao.length > this.swiperht) {
					this.fortupian()
				}
				this.buttonShow = true
			},
			bcphoto() {
				uni.saveImageToPhotosAlbum({
					filePath: this.swiperlist2[this.baocuntp],
					success: function(res) {
						uni.showToast({
							title: '已保存到相册',
							icon: 'success',
							duration: 2000
						})
					}
				});
			},
		}
	}
</script>

<style lang="less">
	.frame{
		width: 750rpx;
		height: 1300rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		
		.frame-title{
			margin-top: 20rpx;
			font-weight: normal;
			font-size: 36rpx;
			color: #000000;
		}
		
		.submit-frame{
			font-weight: 500;
			font-size: 32rpx;
			color: #0052D9;
			position: absolute;
			right: 32rpx;
		}
		.scroll-frame{
			// background: #000000;
			margin-top: 10rpx;
		}
		.name-text{
			margin-left: 24rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
		}
	}
	.checked-frame{
		margin-top: 20rpx;
		margin-left: 15rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #000000;
	}
	.icon{
		width: 100rpx;
		height: 100rpx;
		// background: #888888;
		border-radius: 50%;
	}
	
	.frame-tabs{
		margin-top: 42rpx;
		
		.frame-tabs-block{
			width: 343rpx;
			height: 88rpx;
			background: #FFFFFF;
			border-radius: 0rpx 16rpx 16rpx 0rpx;
			border: 2rpx solid #858A99;
			font-weight: normal;
			font-size: 30rpx;
			color: #333333;
		}
		.frame-tabs-block1{
			width: 346rpx;
			height: 88rpx;
			background: #FFFFFF;
			border: 2rpx solid #858A99;
			border-radius: 16rpx 0rpx 0rpx 16rpx;
			font-weight: normal;
			font-size: 30rpx;
			color: #333333;
		}
		.frame-tabs-block-active{
			background: #366EF4;
			border: 0rpx solid #858A99;
			color: #FFFFFF;
		}
	}
	.frame-tips{
		margin-left: 24rpx;
		width: 100rpx;
		height: 38rpx;
		background: #D9E1FF;
		border-radius: 11rpx 11rpx 11rpx 11rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #0052D9;
	}
	.button-item{
		width: 212rpx;
		height: 89rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		border: 2rpx solid #858A99;
		// font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
		font-weight: normal;
		font-size: 32rpx;
		color: #424A57;
		line-height: 38rpx;
		text-shadow: 0px 11px 32px rgba(28,44,29,0.17);
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	
	.Pop-frame{
		width: 600rpx;
		height: 312rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		.title{
			margin-top: 52rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #333333;
		}
		.text{
			
			font-weight: 400;
			font-size: 30rpx;
			color: #333333;
		}
		.button{
			width: 50%;
			font-weight: 400;
			font-size: 30rpx;
			color: #4A4A4A;
			text-align: center;
		}
		.line{
			margin-top: -32rpx;
			width: 1rpx;
			height: 97rpx;
			background: rgba(60,60,67,0.36);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
		}
	}
	
	.frame-invite{
		width: 750rpx;
		// height: 455rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		.title{
			margin-top: 40rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
		}
		.icon{
			width: 100rpx;
			height: 100rpx;
		}
		.text{
			margin-top: 10rpx;
			font-weight: 400;
			font-size: 26rpx;	
			color: #333333;
		}
		.invite-item{
			margin: 70rpx 61rpx;
		}
		.line{
			margin-left: 32rpx;
			width: 686rpx;
			height: 0rpx;
			border: 1rpx solid #707070;
			opacity: 0.17;
		}
		.cancel{
			margin: 36rpx 0rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #333333;
		}
	}
	
	.submitBottom {
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		.bctp {
			margin-left: 64rpx;
			width: 300rpx;
			height: 89rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			border: 2rpx solid #0052D9;
			font-weight: normal;
			font-size: 32rpx;
			color: #0052D9;
		}
	
		.ljfx {
			// width: 331rpx;
			// border-radius: 44rpx;
			// line-height: 68rpx;
			// font-size: 28rpx;
			// text-align: center;
			// background-color: #F8B62C;
			margin-right: 64rpx;
			width: 300rpx;
			height: 89rpx;
			background: #0052D9;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			font-weight: normal;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
	
	.close-img{
		margin-top: 5rpx;
		margin-left: 32rpx;
		width: 40rpx;
		height: 40rpx;
		position: absolute;
	}
</style>